<template>
  <header id="header" style="background-color:#d0deaa ; ">
    <div class="center">
      <ul class="fl">
        <li> <router-link to="/body" style="color: #806d9e;">商城</router-link> </li>
        <li><router-link to="/admin/login" style="color: #806d9e;">后台管理系统</router-link></li>
      </ul>
      <div class="fr">
        <div class="user" v-if="user.token == 1">
          <a href="##" class="username">
            {{ user.userInfo.nickName.slice(0, 7) }}
            <i class="iconfont icon-down"></i>
          </a>
          <ul class="selector">

            <li>
              <router-link to="/mall/personal" style="color: grey;">个人中心</router-link>
            </li>
            <li>
              <router-link to="/mall/myorder" style="color: grey;">我的订单</router-link>
            </li>
            <li>
              <router-link to="/body" @click="logout" style="color: grey;">退出登录</router-link>
              <!-- <a href="" style="color: grey;" @click="logout">退出登录</a> -->
            </li>
          </ul>
        </div>

        <ul v-if="user.token == 0" class="login" style="display: flex; ;flex-wrap: wrap;">

          <li> <router-link to="/login" style="color: #806d9e;font-size: 13px;">登录</router-link>

          </li>

          <li><router-link to="/register" style="color: #806d9e;font-size: 13px;">注册</router-link></li>

        </ul>


        <div class="shopcart">
          <router-link to="/mall/cart" style="color: white;"><i class="iconfont icon-cart"></i>购物车({{ user.cartNumber
          }})</router-link>

        </div>
      </div>
    </div>
  </header>
  <nav id="nav">
    <div class="banner_x center">
      <router-link to="/body" class="logo">
        <h1>只因商城</h1>
      </router-link>

      <div class="fr">
        <div class="search">
          <input class="text" type="text" v-model="searchInfo" @keyup.enter="search(searchInfo)" autocomplete="off">
          <div class="search_hot">
          </div>
        </div>
        <div class="button iconfont icon-search" @click="search(searchInfo)"></div>
      </div>
    </div>
  </nav>
</template>

<script>
import Store from '../../stores/Store.js'
import '../../assets/mall/styles/search.css'
import axios from 'axios'
export default {
  data() {
    return {
      user: Store(),
      searchInfo: ''
    }
  }
  , methods: {
    search(info) {
      console.log(info);
      axios.post('http://localhost:8080/goods//searchGoods/' + info).then(resp => {
        this.user.searchGoodsInfo = resp.data
        console.log(this.user.searchGoodsInfo);
      })
      this.$router.push('/searchGoods')
      this.user.searchKey = info
      this.searchInfo = '', /* 搜索完输入框为空 */
        this.user.from = 0

    }
    ,
    logout() {
      this.user.token = 0,
        this.user.cartNumber = 0
      sessionStorage.setItem("isLogin", false);
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped></style>